<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> <!-- for HTML5 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>

    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="static/bootstrapValidator/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/bootstrapValidator/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <!-- form: -->
        <section>
            <div class="col-lg-8 col-lg-offset-2">
                <div class="page-header">
                    <h2 class="text-center">发表留言</h2>
                </div>

                <form id="defaultForm" method="post" class="form-horizontal" action="http://localhost:8080/MessageManager_war_exploded/message">
                    <div class="alert alert-success" style="display: none;"></div>

                    <div class="form-group">
                        <label class="col-lg-3 control-label">留言标题</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="topic" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-3 control-label">留言内容</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="content" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-3 control-label">发表日期</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="mesDate" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-3 control-label">留言作者</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="author" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-9 col-lg-offset-3">
                            <button type="submit" class="btn btn-primary">发表</button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- :form -->
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#defaultForm')
            .bootstrapValidator({
                message: 'This value is not valid',
                //live: 'submitted',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    topic: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: '标题不能为空'
                            }
                            /*stringLength: {
                                min: 6,
                                max: 30,
                                message: 'The username must be more than 6 and less than 30 characters long'
                            },
                            remote: {
                                url: 'remote.php',
                                message: 'The username is not available'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: 'The username can only consist of alphabetical, number, dot and underscore'
                            }*/
                        }
                    },
                    content: {
                        validators: {
                            notEmpty: {
                                message: '留言内容不能为空'
                            }
                            /*emailAddress: {
                                message: 'The input is not a valid email address'
                            }*/
                        }
                    },
                    mesDate: {
                        validators: {
                            notEmpty: {
                                message: '日期不能为空'
                            },
                            date: {
                                format: 'YYYY-DD-MM'
                            }
                        }
                    },
                    author: {
                        validators: {
                            notEmpty: {
                                message: '留言作者不能为空'
                            }
                            /*emailAddress: {
                                message: 'The input is not a valid email address'
                            }*/
                        }
                    }

                }
            });
        /*.on('success.form.bv', function(e) {
            // Prevent submit form
            e.preventDefault();

            var $form     = $(e.target),
                validator = $form.data('bootstrapValidator');
            $form.find('.alert').html('Thanks for signing up. Now you can sign in as ' + validator.getFieldElements('username').val()).show();
        });*/
    });
</script>
</body>
</html>